<template>
  <el-card class="box-card">
    <div slot="header">
      <el-form
        :inline="true"
        ref="ruleForm"
        :model="ruleForm"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="工单编码" prop="workorder_code">
          <el-input
            v-model="ruleForm.workorder_code"
            placeholder="请输入工单编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单名称" prop="workorder_name">
          <el-input
            v-model="ruleForm.workorder_name"
            placeholder="请输入工单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="source_code">
          <el-input
            v-model="ruleForm.source_code"
            placeholder="请输入订单编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="product_code">
          <el-input
            v-model="ruleForm.product_code"
            placeholder="请输入产品编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="product_name">
          <el-input
            v-model="ruleForm.product_name"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户编码" prop="client_code">
          <el-input
            v-model="ruleForm.client_code"
            placeholder="请输入客户编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="client_name">
          <el-input
            v-model="ruleForm.client_name"
            placeholder="请输入客户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="需求日期" prop="request_date">
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd"
            v-model="ruleForm.request_date"
            placeholder="请选择需求日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >查询</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          plain
          @click="add"
          >新增</el-button
        >
        <el-button size="small" type="danger" icon="el-icon-delete" plain
          >删除</el-button
        >
          <el-button style="float:right;" icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
      </div>
        
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" max-height="250">
        <el-table-column
          fixed
          prop="workorder_code"
          label="工单编号"
          width="120"
        >
        <template slot-scope="scope">
            <el-button type="text" @click="productionbtn(scope.row.workorder_code)">{{scope.row.workorder_code}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="workorder_name" label="工单名称" width="120">
        </el-table-column>
        <el-table-column align="center" prop="order_source" label="工单来源" width="120">
        </el-table-column>
        <el-table-column align="center" prop="source_code" label="订单编号" width="120">
        </el-table-column>
        <el-table-column align="center" prop="product_code" label="产品编号" width="120">
        </el-table-column>
        <el-table-column align="center" prop="product_name" label="产品名称" width="120">
        </el-table-column>
        <el-table-column align="center" prop="unit_of_measure" label="单位" width="120">
        </el-table-column>
        <el-table-column align="center" prop="quantity" label="生产数量" width="120">
        </el-table-column>
        <el-table-column align="center" prop="batch_code" label="批次号" width="120">
        </el-table-column>
        <el-table-column align="center" prop="client_code" label="客户编码" width="120">
        </el-table-column>
        <el-table-column align="center" prop="client_name" label="客户名称" width="120">
        </el-table-column>
        <el-table-column align="center" sortable prop="request_date" label="需求日期" width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="单据状态"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == 0 ? 'primary' : 'info'"
              disable-transitions
            >
              <div v-if="scope.row.status == 0">草稿</div>
              <div v-else>已确认</div>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row)"
              type="text"
              v-if="scope.row.status == 0"
              size="small"
              >修改</el-button
            >
            <el-button @click="del(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :pageindex="PageIndex"
        :pagesize="PageSize"
        :total="total"
        @CurrentChange="CurrentChange"
        @SizeChange="SizeChange"
      />
    </div>

    <ProductionInput :dialogFormVisible="dialogFormVisible" :isUpdate="isUpdate" :ruleForms="ruleForms" :rules="rules" :title="title" @status="status" @save="save" :tableData="tableDatas" :islook="islook"></ProductionInput>
  </el-card>
</template>

<script>
import Pagination from "../../components/Pagination.vue";
import ProductionInput from "../../components/ProductionInput.vue";

export default {
  components: {
    Pagination,
    ProductionInput
  },
  data() {
    return {
      islook:false,
      isUpdate: false,
      title: "",
      dialogFormVisible: false,
      PageIndex: 1,
      PageSize: 10,
      total: 0,

      ruleForm: {
        workorder_code: "",
        workorder_name: "",
        order_source: "",
        source_code: "",
        product_id: "",
        product_code: "",
        product_name: "",
        unit_of_measure: "",
        quantity: "",
        client_id: "",
        client_code: "",
        client_name: "",
        batch_code: "",
        request_date: "",
        parent_id: "",
        ancestors: "",
        status: 0,
        remark: "",
        create_by: "",
        create_time: "",
        update_by: "",
        update_time: "",
        specification:""
      },
      ruleForms: {
        workorder_code: "",
        workorder_name: "",
        order_source: "",
        source_code: "",
        product_id: "",
        product_code: "",
        product_name: "",
        unit_of_measure: "",
        quantity: "",
        client_id: "",
        client_code: "",
        client_name: "",
        batch_code: "",
        request_date: "",
        parent_id: "",
        ancestors: "",
        status: 0,
        remark: "",
        create_by: "",
        create_time: "",
        update_by: "",
        update_time: "",
        specification:""
      },
      rules: {
        workorder_code: [
          { required: true, message: "请输入工单编号", trigger: "blur" },
        ],
        workorder_name: [
          { required: true, message: "请输入工单名称", trigger: "blur" },
        ],
        order_source: [
          { required: true, message: "请选择来源类型", trigger: "blur" },
        ],
        product_code: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        product_name: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        quantity: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        batch_code: [
          { required: true, message: "请输入批次号", trigger: "blur" },
        ],
        request_date: [
          { required: true, message: "请选择需求日期", trigger: "blur" },
        ],
      },
      // ruleForm: {
      //   workorder_code: "",
      //   workorder_name: "",
      //   source_code: "",
      //   product_code: "",
      //   product_name: "",
      //   client_code: "",
      //   client_name: "",
      //   request_date: ""
      // },
      tableData: [],
      tableDatas: [],
    };
  },
  methods: {
    productionbtn(e){
      this.dialogFormVisible = true;
      this.islook = true;
      this.title = "查看工单信息";
      this.$http
        .request({
          type: "get",
          url: "/api/ProductionPlan/GetProWorkordersDto",
          params: {
            id: e,
          },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.ruleForms=res.data.data[0];
          }
        })
        .catch((err) => {
          console.log("123");
        })
    },
    Refresh(){
            this.databind();
        },
    status(e){
      this.dialogFormVisible=false;
    },
    add() {
      this.dialogFormVisible = true;
      this.title = "新增生产计划";
      this.isUpdate = false;

      this.ruleForms={};
    },
    closeDialog() {},
    handleEdit(e) {},
    del(e) {},
    CurrentChange(e) {
      this.PageIndex = e;
      this.dataBind();
    },
    SizeChange(e) {
      this.PageSize = e;

      //从第一页开始
      this.PageIndex = 1;
      this.dataBind();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log(this.ruleForm);
          this.databind();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    save(e){
        console.log("有内容")
    },
    databind() {
      this.$http
        .request({
          type: "get",
          url: "/api/ProductionPlan",
          params: {
            PageIndex: this.PageIndex,
            PageSize: this.PageSize,
            workorder_code: this.ruleForm.workorder_code,
            workorder_name: this.ruleForm.workorder_name,
            source_code: this.ruleForm.source_code,
            product_code: this.ruleForm.product_code,
            product_name: this.ruleForm.product_name,
            client_code: this.ruleForm.client_code,
            client_name: this.ruleForm.client_name,
            request_date: this.ruleForm.request_date,
          },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.count;
          }
        })
        .catch((err) => {
          console.log("123");
        })
        .finally(() => {});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  created() {
    this.databind();
  },
};
</script>

<style>

</style>